<!DOCTYPE HTML>
<html>
<body onload="load()">
	<canvas id="canvas"></canvas>
	<img id="image" src=""/>
</body>
<script type="text/javascript">
	function load(){
		var image = new Image();
		image.setAttribute('crossOrigin', 'anonymous');		
		image.src = '123.gif';  
		image.onload = function(){  
		  var base64 = getBase64Image(this);  
		  console.log(base64);  
		}
	}
	
	function getBase64Image(img) {  
		 var canvas = document.getElementById("canvas");  
		 canvas.width = img.width;  
		 canvas.height = img.height;  
		 var ctx = canvas.getContext("2d");  
		 ctx.drawImage(img, 0, 0, img.width, img.height);  
		 var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); 
		 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
		 var dataURL = canvas.toDataURL("image/"+ext);  
		 return dataURL;  
	}
	
	 
</script>
</html>